/* eslint-disable comma-dangle */
import React, { useState, useMemo, useEffect } from 'react';
import s from './style.module.less';
import { Tabs } from '@knownsec/react-component';
import Table from './components/table';
import { GetQueryString } from '@/common/constant';
import { useLocation } from 'react-router-dom';
// import Tablesec from './components/table/ing';
import CardWrapper from '../card-wrapper';
import BreadCrumbBox from '@/components/BreadCrumb';
import { getTaskTotal } from '~/API/index';

const { TabPane } = Tabs;

let childPages = [
  {
    name: '正在监测中',
    flag: 'TS_PROCESSING',
  },
  {
    name: '排队中',
    flag: 'TS_QUEUED',
  },
  {
    name: '历史任务',
    flag: 'TS_HISTORY',
  },
];

function Demo({ taskname }) {
  const [showItem, changetab] = useState('0');
  return (
    <Tabs
      defaultActiveKey="TS_PROCESSING"
      onChange={changetab}
      tabBarStyle={{
        backgroundColor: '#ffffff',
        fontSize: 14,
        fontWeight: 400,
        color: '#1E1F23',
        borderColor: '#ffffff',
        marginBottom: '0',
      }}
    >
      {childPages.map((child, index) => {
        let { name, flag } = child;
        return (
          <TabPane tab={name} key={index}>
            {/* 后台接收任务状态数字 */}
            {showItem == '0' && <Table flag="3" taskname={taskname}></Table>}
            {showItem == '1' && <Table flag="1" taskname={taskname}></Table>}
            {showItem == '2' && <Table flag="2" taskname={taskname}></Table>}
          </TabPane>
        );
      })}
    </Tabs>
  );
}

function Card(data) {
  return (
    <div className={s.cardbox}>
      <div className={s.card}>
        <svg
          width="98px"
          height="98px"
          viewBox="0 0 98 98"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xlink="http://www.w3.org/1999/xlink"
        >
          <g id="间距说明" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <g
              id="任务管理-任务队列"
              transform="translate(-253.000000, -199.000000)"
              fill="#FAAF2B"
            >
              <g id="编组-6" transform="translate(253.000000, 199.000000)">
                <g id="Grey">
                  <path
                    d="M48.846,97.693 C21.912,97.693 0,75.781 0,48.847 C0,21.912 21.912,0 48.846,0 C75.78,0 97.692,21.912 97.692,48.847 C97.692,75.781 75.78,97.693 48.846,97.693 Z M48.846,6.001 C25.221,6.001 6,25.222 6,48.848 C6,72.473 25.221,91.694 48.846,91.694 C72.471,91.694 91.692,72.473 91.692,48.848 C91.692,25.221 72.471,6.001 48.846,6.001 Z"
                    id="Shape"
                  ></path>
                </g>
                <g
                  id="3.Icon/2.面性/1.基础通用类/局域网搜索"
                  transform="translate(32.500000, 32.000000)"
                >
                  <path
                    d="M28.7216191,22.0112037 C30.5714594,23.8752716 30.9226734,26.6776999 29.7751898,28.8980407 L33,32.1484123 L31.1625446,34 L28.0850416,30.8995212 C25.7951348,32.6262924 22.5345796,32.4408672 20.4530699,30.3433482 C18.1697731,28.04249 18.1698403,24.3121295 20.4531371,22.0112714 C22.7364339,19.7104132 26.4383223,19.7103456 28.7216191,22.0112037 Z M16.4663946,22.2579247 C15.905288,23.4483148 15.5913258,24.7799124 15.5913258,26.1854037 C15.5913258,28.0978424 16.17262,29.8734683 17.1668753,31.3426535 C16.6495668,31.3956108 16.1235607,31.4224845 15.5913258,31.4224845 C14.2791296,31.4224845 13.0047946,31.259135 11.7872537,30.9515147 C10.7537783,28.7667703 9.91999536,25.7536676 9.46709964,22.2579247 L16.4663946,22.2579247 Z M6.83851321,22.2578967 C7.16825486,25.0114646 7.72761672,27.5345135 8.47838241,29.6957741 C5.37398861,28.0892677 2.87424835,25.4639611 1.41392858,22.2580214 L6.83851321,22.2578967 Z M22.3894466,23.8709192 C21.1209484,25.1491737 21.1209484,27.2216338 22.3894466,28.4998883 C23.6579448,29.7781428 25.7145868,29.7781428 26.983085,28.4998883 C28.2515833,27.2216338 28.2515833,25.1491737 26.983085,23.8709192 C25.7145868,22.5926646 23.6579448,22.5926646 22.3894466,23.8709192 Z M6.70085498,11.7815854 C6.60209979,12.8660591 6.53812673,13.981536 6.51110369,15.1205698 L6.49888245,15.8519194 L6.49638574,16.3658773 L6.49888245,16.8798352 C6.50798567,17.8155291 6.54191098,18.7366463 6.59948678,19.6391627 L0.491159029,19.6389053 C0.17052858,18.383544 0,17.0674608 0,15.7112422 C0,14.3544776 0.170668201,13.0378784 0.491551313,11.7820559 L6.70085498,11.7815854 Z M21.8647426,11.7818877 C22.0093592,13.2451889 22.0877115,14.7808698 22.0877115,16.3658773 C22.0877115,16.7148108 22.0839142,17.0613537 22.0764486,17.4052602 C20.6440147,17.8353849 19.3613354,18.6121539 18.32196,19.6382328 L9.20772732,19.6393015 C9.15914967,18.9405766 9.12564491,18.2276943 9.10842428,17.5029657 L9.09753321,16.8650045 L9.09494004,16.3658773 L9.09753321,15.8667502 C9.11217959,14.458149 9.18852865,13.0909774 9.31792256,11.7817417 L21.8647426,11.7818877 Z M24.4818295,11.7819473 L30.6912494,11.7826438 C31.0120382,13.0382862 31.1826516,14.3546865 31.1826516,15.7112422 C31.1826516,16.968477 31.0361067,18.1912212 30.7592908,19.3630758 C29.1476153,17.9059102 27.0195493,17.0205124 24.6862658,17.0205124 L24.6862658,16.3658773 L24.6862658,16.3658773 C24.6862658,14.7929484 24.6162958,13.2587043 24.4818295,11.7819473 Z M15.5913258,0 C16.6122941,0 17.6103421,0.0988882652 18.576552,0.287678356 C19.8401518,2.250062 20.909089,5.37332014 21.5246506,9.16405727 L9.65819384,9.16283624 C10.2737845,5.37258788 11.3426261,2.24964646 12.6060827,0.287108452 C13.5723094,0.0988890802 14.5703575,0 15.5913258,0 Z M9.1043597,1.42069823 C8.17154893,3.58056084 7.45826223,6.21960027 7.01536178,9.16311006 L1.41445082,9.16331914 C2.94447721,5.80503866 5.61507047,3.08396455 8.92639446,1.50379355 L9.1043597,1.42069823 Z M22.0782919,1.42069823 C25.4719247,2.98735241 28.210819,5.74521984 29.7681308,9.16321221 L24.1672286,9.16270363 C23.7243237,6.21935734 23.0110597,3.58046143 22.0782919,1.42069823 Z"
                    id="形状"
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </svg>
        <div className={s.txt}>
          <div>历史累计监测任务数</div>
          <div className={s.num}>{data.data.task_session_count || 0}</div>
        </div>
      </div>
      <div className={s.card}>
        <svg
          width="98px"
          height="98px"
          viewBox="0 0 98 98"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xlink="http://www.w3.org/1999/xlink"
        >
          <g id="间距说明" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <g id="任务管理-任务队列" transform="translate(-714.000000, -190.000000)">
              <g id="编组-20" transform="translate(714.000000, 190.000000)">
                <g id="ey" fill="#0B6FD6">
                  <path
                    d="M48.845,97.691 C21.912,97.691 0,75.779 0,48.845 C0,21.912 21.912,0 48.845,0 C75.778,0 97.69,21.912 97.69,48.845 C97.69,75.779 75.778,97.691 48.845,97.691 Z M48.845,6.001 C25.22,6.001 6,25.221 6,48.846 C6,72.471 25.22,91.692 48.845,91.692 C72.47,91.692 91.69,72.471 91.69,48.846 C91.69,25.221 72.47,6.001 48.845,6.001 Z"
                    id="Shape"
                  ></path>
                </g>
                <g
                  id="3.Icon/2.面性/2.业务安全类/系统监控"
                  transform="translate(28.000000, 28.000000)"
                >
                  <path
                    d="M11.27074,19.6861875 L14.5797015,22.9981769 L18.518365,17.75025 L20.4570158,19.6875247 L35.4379126,19.6862684 L35.4379126,24.9375 C35.4379126,26.3872475 34.26255,27.5625 32.8128025,27.5625 L22.3128025,27.5625 L22.3128025,31.5 L32.9913537,31.5 L32.9913537,34.125 L9.36635366,34.125 L9.36635366,31.5 L19.6878025,31.4986875 L19.6878025,27.5625 L9.18780251,27.5625 C7.73805505,27.5625 6.56280251,26.3872475 6.56280251,24.9375 L6.5625,19.6862684 L11.27074,19.6861875 Z M35.4379126,17.0612684 L21.542365,17.0611875 L18.2350163,13.7566398 L14.2960525,19.0010625 L12.3598086,17.0626045 L6.56310503,17.0612684 L6.56280251,10.5 C6.56280251,9.05025253 7.73805505,7.875 9.18780251,7.875 L32.8128025,7.875 C34.26255,7.875 35.4379126,9.05025253 35.4379126,10.5 L35.4379126,17.0612684 Z"
                    id="形状"
                    fill="#0B6FD6"
                  ></path>
                  <rect id="矩形-copy-39" x="0" y="0" width="42" height="42"></rect>
                </g>
              </g>
            </g>
          </g>
        </svg>
        <div className={s.txt}>
          <div>历史累计监测业务系统数</div>
          <div className={s.num}>{data.data.target_count || 0}</div>
        </div>
      </div>
      <div className={s.card}>
        <svg
          width="98px"
          height="98px"
          viewBox="0 0 98 98"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xlink="http://www.w3.org/1999/xlink"
        >
          <g id="间距说明" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <g id="任务管理-任务队列" transform="translate(-1192.000000, -190.000000)">
              <g id="编组-29" transform="translate(1192.000000, 190.000000)">
                <g id="Grey" fill="#29CB97" transform="translate(-0.000000, 0.000000)">
                  <path
                    d="M48.847,97.695 C21.912,97.695 0,75.783 0,48.848 C0,21.913 21.912,0 48.847,0 C75.782,0 97.695,21.913 97.695,48.848 C97.695,75.783 75.781,97.695 48.847,97.695 Z M48.847,6.001 C25.221,6.001 6,25.223 6,48.849 C6,72.475 25.221,91.696 48.847,91.696 C72.473,91.696 91.695,72.475 91.695,48.849 C91.695,25.223 72.473,6.001 48.847,6.001 Z"
                    id="Shape"
                  ></path>
                </g>
                <g
                  id="3.Icon/2.面性/2.业务安全类/大数据处理系统"
                  transform="translate(28.000000, 28.000000)"
                >
                  <path
                    d="M32.8125,7.875 C34.9871212,7.875 36.75,9.6378788 36.75,11.8125 C36.75,13.7890981 35.2935622,15.4255268 33.3953066,15.7071663 L31.7233898,23.1516317 C33.1686045,24.0868255 34.125,25.7129737 34.125,27.5625 C34.125,30.4619949 31.7744949,32.8125 28.875,32.8125 C25.9755051,32.8125 23.625,30.4619949 23.625,27.5625 C23.625,26.4476607 23.9724889,25.4139819 24.565065,24.5638652 L15.7670108,17.6627607 C15.0418389,18.0858881 14.2060726,18.3401604 13.3136147,18.371675 L10.9655981,26.6733941 C12.2468595,27.3229823 13.125,28.6526908 13.125,30.1875 C13.125,32.3621212 11.3621212,34.125 9.1875,34.125 C7.0128788,34.125 5.25,32.3621212 5.25,30.1875 C5.25,28.3077269 6.56724351,26.7356126 8.32903126,26.3438562 L10.745226,17.8059126 C9.0417538,16.938142 7.875,15.167826 7.875,13.125 C7.875,10.2255051 10.2255051,7.875 13.125,7.875 C16.0244949,7.875 18.375,10.2255051 18.375,13.125 C18.375,14.101383 18.1084634,15.0155129 17.6441812,15.798599 L26.60454,22.8274973 C27.2916691,22.4974164 28.0617398,22.3125 28.875,22.3125 C28.9905159,22.3125 29.1051605,22.3162308 29.2188198,22.3235784 L30.8163728,15.2072482 C29.6545655,14.5226252 28.875,13.2586012 28.875,11.8125 C28.875,9.6378788 30.6378788,7.875 32.8125,7.875 Z"
                    id="形状"
                    fill="#31CB9A"
                  ></path>
                  <rect id="矩形-copy-59" x="0" y="0" width="42" height="42"></rect>
                </g>
              </g>
            </g>
          </g>
        </svg>
        <div className={s.txt}>
          <div>历史累计监测URL</div>
          <div className={s.num}>{data.data.url_count || 0}</div>
        </div>
      </div>
    </div>
  );
}

function TaskList() {
  const search = useLocation().search;
  const taskName = GetQueryString(search, 'taskname');
  const [showItem, setShowItem] = useState('0');
  const arr = [
    { link: '', name: '任务管理' },
    { link: '', name: '任务队列', active: true },
  ];
  const [taskTotal, setTotal] = useState({});

  function getTotal() {
    getTaskTotal().then((res) => {
      setTotal(res.data);
    });
  }
  useEffect(() => {
    getTotal();
  }, []);
  return (
    <>
      <BreadCrumbBox arr={arr}>
        <div className={s.total}>
          <div className={s.item}>
            <label>监测中任务数</label>
            <div>{taskTotal.processing_count || 0}</div>
          </div>
          <div className={s.item}>
            <label>排队中任务数</label>
            <div>{taskTotal.queue_count || 0}</div>
          </div>
        </div>
      </BreadCrumbBox>
      <div className={s.content}>
        <CardWrapper title="所有任务综述" className={s.topNav}>
          <Card data={taskTotal}></Card>
        </CardWrapper>
        <CardWrapper title="任务列表" className="sm-margin-con">
          {/* <Demo taskname={taskName}></Demo> */}
          <Tabs
            defaultActiveKey="TS_PROCESSING"
            onChange={setShowItem}
            tabBarStyle={{
              backgroundColor: '#ffffff',
              fontSize: 14,
              fontWeight: 400,
              color: '#1E1F23',
              borderColor: '#ffffff',
              marginBottom: '0',
            }}
          >
            <TabPane tab={'正在监测中'} key={0}>
              {showItem == '0' && <Table flag="3" taskname={taskName}></Table>}
            </TabPane>
            <TabPane tab={'排队中'} key={1}>
              {showItem == '1' && <Table flag="1" taskname={taskName}></Table>}
            </TabPane>
            <TabPane tab={'历史任务'} key={2}>
              {showItem == '2' && <Table flag="2" taskname={taskName}></Table>}
            </TabPane>
          </Tabs>
        </CardWrapper>
      </div>
    </>
  );
}

export default TaskList;
